ES6变量的解构赋值

2023-08-10 18:30| 来源: 网络整理| 查看: 265

使用方式

普通形式

嵌套结构

使用默认值

注意事项

上一篇我们讲解了数组的解构赋值，解构还可以用于对象、字符串等等，这里我们来讲解对象的解构赋值。

ES6变量的解构赋值--数组_zxn200125的博客-CSDN博客

使用方式普通形式 let {obj1,obj2} = {obj1:'a',obj2:'b'}; console.log(obj1); //a console.log(obj2); //b

数组的解构是按照次序排列的，变量取值由位置决定。但是对象的解构不同，对象的属性没有次序，变量必须与属性同名才能够取得正确的值。解构失败与数组一样，都是输出undefined。

let {obj2,obj1} = {obj1:'a',obj2:'b'}; console.log(obj1); //a console.log(obj2); //b let {obj} = {obj1:'a',obj2:'b'}; console.log(obj); //undefined

如果变量名与属性名不一致，可以通过写成下列形式来解决：

let {obj1:obj2} = {obj1:'a',obj:'b'}; console.log(obj2); //a let obj = {one:'aa',two:'bb'}; let {one:o,two:t} = obj; console.log(o); //aa console.log(t); //bb

这说明，对象的解构赋值的内部机制是先找到同名属性，再赋值给对应变量，也就是真正被赋值的是后者，而不是前者。那么也就是说，对象的解构赋值实际上是下面的简写形式：

let {obj1:obj1,obj2:obj2} = {obj1:'a',obj2:'b'};

我们可以看下面这个例子来理解：

let {obj1:obj2} = {obj1:'aa',obj:'bb'}; console.log(obj1); //ReferenceError: obj1 is not defined console.log(obj2); //aa

上例中，obj1是匹配的模式，obj2才是真正匹配赋值的变量。也就是真正倍赋值的是变量obj2，而不是模式obj1

嵌套结构

与数组一样，嵌套结构的对象也可以解构赋值

let obj = { p:['one',{y:'two'} ] }; let {p:[x,{y}]} = obj; console.log(x); //one console.log(y); //two

上例中，p是用于匹配的模式，不是变量，所以不会进行赋值，如果要令p也作为变量进行赋值，我们可以这么做：

let obj = { p:['one',{y:'two'} ] }; let {p,p:[x,{y}]} = obj; console.log(x); //one console.log(y); //two console.log(p); //[ 'one', { y: 'two' } ]

多层对象嵌套：

对象和数组嵌套赋值：

let obj = {}; let arr = []; ({fun:obj.o,fn:arr[0]} = {fun:10,fn:'abc'}); console.log(obj); //{ o: 10 } console.log(arr); //[ 'abc' ] 使用默认值

同样，对象的解构也可以指定默认值，并且默认值生效的条件也与数组一样：对象的属性值严格等于undefined

let {a=1} = {}; console.log(a); //1 let {b,c = 2} = {b:1}; console.log(b); //1 console.log(c); //2 let {d:e = 3} = {}; console.log(e); //3 let {m:n = 1} = {m:2}; console.log(n); //2 //默认值生效 let {x = 2} = {k:undefined}; console.log(x); //2 let {y = 2} = {y:true}; console.log(y); //true 注意事项

①解构赋值已声明变量

//错误写法 let a; {a} = {a:1};

上例中代码是错误写法，因为JavaScript引擎会将{x}理解成一个代码块，故会导致语法错误。要避免该问题，就不能将花括号写在行首，我们可以在外面再保卫一个圆括号来避免此问题。

let a; ({a} = {a:10}); console.log(a); //10

②“奇怪的”合格语法

对象解构赋值允许等号左边的模式中不存放任何变量名，虽然这些表达式没有任何意义，但是语法上合法，能够执行。

({} = [true,true,false]); ({} = 'a','b','c'); ({} = []);

③数组与对象关系

我们知道数组本质是特殊对象，所以对于数组可以进行对象属性的解构

let arr = [1,2,3,4,5]; let {0:first,[arr.length-1]:last} = arr; console.log(first); //1 console.log(last); //5

上例中，对数组进行对象解构，first对应的是数组arr的第一个索引0，lastt对应的是数组arr的最后一个索引

【本文地址】

公司简介

联系我们